import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { colors } from 'bee/themes';
import { px2dp } from 'bee/utils/px2dp';
import CheckBox from 'bee/components/Checkbox';
import { Icon } from 'bee/components/Icon';
import { Names } from 'bee/components/Icon/Icons';

// @flow
type Props = {
  title: string,
  isChecked: boolean,
  onClick: Function,
};

class Upload extends Component<Props> {
  render() {
    return (
      <View style={{ marginTop: px2dp(30) }}>
        <CheckBox
          label={this.props.title}
          isChecked={this.props.isChecked}
          onClick={() => {
            this.props.onClick({ hasCase: !this.props.isChecked });
          }}
        />
        {this.props.isChecked && (
          <TouchableOpacity style={styles.uploadBtn}>
            <View style={{ alignItems: 'center' }}>
              <Icon name={Names.paizhao} color="#9f9f9f" />
              <Text>请点击拍照</Text>
            </View>
          </TouchableOpacity>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  uploadBtn: {
    marginTop: px2dp(27),
    width: px2dp(200),
    height: px2dp(120),
    backgroundColor: colors[1105],
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Upload;
